<script setup>

// 引用pinia组件
import { storeToRefs } from 'pinia'
import { useProductStore } from '../stores/counter'

import { useRouter } from 'vue-router'
const router = useRouter()

// 获取pinia数据
const {lists} = storeToRefs(useProductStore())

const { deleteListItem } = useProductStore()

const deleteItem = (id) => {
  // 调用pinia方法 删除商品
  deleteListItem(id)
}

// 编辑Item
const editItem = (id) => {
  // 跳转到编辑页面
  router.push(`/edit/${id}`)
}



</script>

<template>
<table>
    <tr>
        <th>ID</th>
        <th>商品名称</th>
        <th>售价</th>
        <th>操作</th>
    </tr>
    <tr v-for="item in lists" :key="item.id"> 
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td><button @click="editItem(item.id)">编辑</button>
            &nbsp;
            <button @click="deleteItem(item.id)">删除</button></td>
    </tr>
</table>
    
</template>

<style scoped>
 table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
}
 table th{
  border: 1px solid black;
  background-color: darkgray;
  padding: 10px;
  text-align: center;
}
 table td{
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}
 table td button{
  border: 1px solid black;
  padding: 0 10px;
  font-size: 14px;
  background-color: white;
}
 table td button:hover{
 background-color:lightblue;
 cursor: pointer;
}
</style>